<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="zuo">
			<h1 class="kuai" v-show="isShow">你好啊</h1>
		</transition>
		<hr>
		<button @click="isShow2 = !isShow2">显示/隐藏</button>
		<transition name="you">
			<h1 class="man" v-show="isShow2">你好啊2</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				isShow:true,
				isShow2:true
			}
		},
	}
</script>

<style>
	h1{
		background-color: orange;
	}
	.kuai{
		transition: 1s linear;
	}
	.man{
		transition: 3s linear;
	}

	/* 离开的起点,来的终点 */
	.zuo-leave,.zuo-enter-to{
		transform: translateX(0px);
	}
	/* 离开的终点,来的起点 */
	.zuo-leave-to,.zuo-enter{
		transform: translateX(-100%);
	}

	/* 离开的起点,来的终点 */
	.you-leave,.you-enter-to{
		transform: translateX(0px);
	}
	/* 离开的终点,来的起点 */
	.you-leave-to,.you-enter{
		transform: translateX(100%);
	}
</style>
